import {
    View, FlatList, RefreshControl, TouchableOpacity,
    TouchableHighlight, Text, StyleSheet, Image
} from 'react-native';
import React, {PureComponent} from 'react';
import Urls, {getRealUrl} from '../const/Urls'
import LocalImg from '../const/Images'
import moment from 'moment'

/**
 * 拖轮信息
 */
class PageTlxx extends PureComponent {

    constructor(props) {
        super(props);
        this.user = this.props.user;
        this.pageNum = 1;
        this.state = {
            data: [],
            isLoading: false,
        }
    }

    componentDidMount() {
        const request = new Map();
        request.set('pageNum', this.pageNum)

        fetch(getRealUrl(Urls['tlxxUrl'], request), {
            method: "GET",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
        })
            .then(response => response.json())
            .then(responseJson => {
                this.setState({
                    data: responseJson
                })
            })
            .catch(error => {
                console.error(error);
            });
    }


    render() {
        return (
            <View style={{flexDirection: 'column', flex: 1}}>

                <View style={{
                    flexDirection: 'row',
                    flex: 0,
                    height: 60,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: '#0066FF'
                }}>
                    <View style={{flex: 1, padding: 10}}>
                        <TouchableOpacity onPress={() => this.props.navigation.pop()}>
                            <Image source={LocalImg['backImg']} style={{height: 30, width: 30, resizeMode: 'contain'}}/>
                        </TouchableOpacity>
                    </View>
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{fontSize: 20, color: '#ffffff'}}>拖轮信息</Text>
                    </View>

                    <View style={{flex: 1, alignItems: 'flex-end', padding: 10}}>

                    </View>
                </View>


                <View style={{
                    flexDirection: 'row',
                    backgroundColor: '#f9f9f9',
                    padding: 10,
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <View style={{flex: 1}}>
                        <Text style={{fontWeight: 'bold'}}>拖轮名称</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text style={{fontWeight: 'bold'}}>马力</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text style={{fontWeight: 'bold'}}>长度</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text style={{fontWeight: 'bold'}}>吃水</Text>
                    </View>
                </View>

                <FlatList
                    data={this.state.data}
                    renderItem={(item, index) => this.renderRow(item, index)}
                    keyExtractor={this.keyExtractor}
                    ItemSeparatorComponent={this.separator}
                    refreshControl={
                        <RefreshControl
                            refreshing={false}
                        />
                    }/>

            </View>
        )
    }

    keyExtractor = (item, index) => item.ID + ""

    refresh() {

    }

    separator(index) {
        return (
            <View key={index} style={{height: 1, backgroundColor: '#CCCCCC'}}/>
        )
    }

    processDateTime(date) {
        const m = moment(date)
        if (m.isValid()) {
            return m.format('DD/HHmm')
        } else
            return ""
    }


    renderRow({item, index}) {

        let bColor = index % 2 !== 0 ? "#f9f9f9" : "#ffffff";
        let show = item.TUGBOAT_NAME === '' && parseInt(item.ID) === 0;
        let style = 'flex';
        if (show) {
            style = 'none'
        }
        return (

            <TouchableHighlight key={item.CHDOCKCODE} style={{display: style}}>
                <View style={{
                    flexDirection: 'row',
                    padding: 10,
                    backgroundColor: bColor,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    <View style={{flex: 1}}>
                        <Text>{item.tugboat_name}</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text>{item.mali}</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text>{item.length}</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <Text>{item.draft}</Text>
                    </View>
                </View>
            </TouchableHighlight>

        )
    }
}

const styles = StyleSheet.create({
    phone: {
        flex: 1,
        textDecorationLine: 'underline',
        color: '#0066FF',
    },
    text: {
        flex: 1
    },
    row: {
        flexDirection: 'column',
        justifyContent: 'center',
        padding: 10,
    },
});


export default PageTlxx;